<template>
	<a-spin :spinning='loading'>
		<a-card>
			<section slot='title'>用户列表</section>
			<a-row :gutter='16'>
				<a-col :span='5'>
					<span class='label'>创建日期：</span>
					<a-range-picker  v-model='createTime' />
				</a-col>
				<a-col :span='5'>
					<span class='label'>角色：</span>
					<a-select v-model='roleIds' class='w-full' allow-clear placeholder='请选择'>
						<a-select-option :value='item.id' v-for='item in roleList'>{{ item.name }}</a-select-option>
					</a-select>
				</a-col>
				<a-col :span='5'>
					<span class='label'>联系方式：</span>
					<a-input :max-length='100' allow-clear v-model='mobile' placeholder='请输入' />
				</a-col>

				<a-col :span='5'>
					<span class='label'>用户名：</span>
					<a-input :max-length='100' allow-clear v-model='username' placeholder='请输入' />
				</a-col>


				<a-col :span='8'>
					<a-button class='ml-18' type='primary' @click='search'>查询</a-button>
					<a-button class='mx-8' @click='reset'>重置</a-button>
					<a-button @click='getEdit' class='mx-8' type='primary'>新增</a-button>
					<a-button type='primary' ghost class='ml-10 border-5' @click='exportTable'>导出</a-button>
				</a-col>
			</a-row>
			<a-table class='mt-16 order-table' :columns='columns' :data-source='data' :scroll='scroll'
				:pagination='pagination'>
				<template #createTime='createTime, data'>
					{{ $utils.formatTimestamp(data.createTime) }}
				</template>
				<template #action='action, data'>
					<div class='flex items-center justify-between'>
						<a-button @click='goCharts(data)' style='background: 	#32CD32;border:#32CD32' type='primary'>
							编辑
						</a-button>

						<a-button @click='delect(data)' class='ml-10 mr-10' type='danger'>
							删除
						</a-button>
						<a-button style='background-color: #FFD700;border: #FFD700;' type='primary'
							@click='reactPass(data)'>
							重置密码
						</a-button>

					</div>
				</template>
			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<create @upload='upload' ref='create'></create>
	</a-spin>
</template>
<script>
	import axios from 'axios'
	import create from './components/create.vue'
	import {
		deleteUser,
		getUserList,
		roleCate,
		userpassword
	} from '@/api/user'
	import {
		tableMixins
	} from '@/utils/mixins'
	import {
		userexport
	} from '@/api/baseInfo'
	import storage from '@/utils/storage'
	import {
		ACCESS_TOKEN
	} from '@/store/mutation-types'

	export default {
		mixins: [tableMixins],
		components: {
			create
		},
		data() {
			return {
				loading: false,
				tabs: 'select1',
				orderId: undefined,
				createTime: [],
				status: null,
				orderStatusEnums: [{
						value: 1,
						name: '成功'
					},
					{
						value: 2,
						name: '失败'
					}
				],
				data: [{
					id: 1111,
					travellerName: '武松',
					status: 1
				}],
				columns: [{
						title: '序号',
						dataIndex: 'id',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: '用户名',
						dataIndex: 'nickname',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'nickname'
						}
					},
					{
						title: '角色',
						dataIndex: 'roleName',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'roleName'
						}
					},
					{
						title: '联系方式',
						dataIndex: 'mobile',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'mobile'
						}
					},
					{
						title: '账号',
						dataIndex: 'username',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'username'
						}
					},

					{
						title: '创建时间',
						dataIndex: 'createTime',
						align: 'center',
						width: 120,
						scopedSlots: {
							customRender: 'createTime'
						}
					},

					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],
				mobile: '',
				roleIds: '',
				username: '',
				roleList: []
			}
		},
		computed: {},
		watch: {},
		async created() {
			this.loadData()
			this.getData()
		},
		methods: {

			//导出信息
			async exportTable() {
				console.log(storage.get(ACCESS_TOKEN))
				const response = await axios.get(`${process.env.VUE_APP_BASE_API}/admin-api/system/user/export`, {
					headers: {
						'Authorization': storage.get(ACCESS_TOKEN) // 将 Authorization 添加到 headers 中

					},
					params: this.getSearchParams()
				})

				const url = window.URL.createObjectURL(new Blob([response.data], {
					type: "application/octet-stream;"
				}))
				const link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				const fileName = new Date().getTime() + '-' + name + '.xlsx'
				link.setAttribute('download', fileName)
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)

			},

			loadData() {
				roleCate().then(res => {
					this.roleList = res
				})
			},
			onChange(e) {
				this.createTime = [this.$utils.getStartTime(e[0]._d), this.$utils.getEndTime(e[1]._d)].toString()
			},
			search() {
				this.pageNum = 1
				this.getData()
			},
			upload() {
				this.search()
			},
			delect(data) {
				this.$confirm({
					title: '删除',
					content: `请确认是否删除该账号？`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {
						this.loading = true
						deleteUser({
								id: data.id
							})
							.then(res => {
								this.$message.success('删除成功！')

								this.search()

								this.loading = false
							})
							.finally(() => (this.loading = false))
					}
				})
			},
			goCharts(data) {
				this.$refs.create.open(data)
			},
			getEdit(data) {
				this.$refs.create.open(data)
			},
			getSearchParams() {
				console.log(this.vendorId)
				return {
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
					createTime: this.createTime,
					username: this.username,
					roleIds: this.roleIds,
					mobile: this.mobile
				}
			},
			getData() {
				this.loading = true
				getUserList(this.getSearchParams())
					.then(data => {
						this.total = data.total
						this.data = data.list
					})
					.finally(() => (this.loading = false))
			},
			reset() {
				this.createTime = ''
				this.username = ''
				this.roleIds = ''
				this.mobile = ''
			}
		}
	}
</script>
<style lang='less' scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 100px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>